<template>
    <div class="side-main display-inline w-100d">
        <div class="content">
            <div class="content-header">
                <button class="btn btn-success" v-on:click="buttonClick"><i class="fa fa-list-ul"></i></button>
                <div class="pull-right">
                    <a><i class="fa fa-sign-out"></i>Sign Out</a>
                </div>
            </div>
            <div class="content-body">
                <div class="breadcrumb-body">
                    <h2 class="breadcrumb-title">{{breadcrumbTitle}}</h2>
                    <breadcrumb v-for="breadcrumb in breadcrumbs" :key="breadcrumb.id" :to="breadcrumb.to"
                                :icon="breadcrumb.icon" :cut="breadcrumb.cut" :disabled="breadcrumb.disabled">
                        {{breadcrumb.text}}
                    </breadcrumb>
                </div>
                <slot></slot>
            </div>
            <footer-info style="position: static"></footer-info>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-undef */
    import Breadcrumb from '../widget/Breadcrumb.vue';
    import FooterInfo from '../widget/FooterInfo.vue';
    export default {
    	name: 'SideContent',
        props: {
            breadcrumbTitle: {type: String, required: true},
            breadcrumbs: {type: Array, required: true}
        },
        methods: {
            buttonClick () {
                let sideBar = $('.sidebar');
                let sideMain = $('.side-main');
                this.filter(sideBar, 50);
                if (sideBar.hasClass('activate')) {
                    sideBar.addClass('side-switch');
                    sideBar.removeClass('activate');
                    let w = this.oldWidth();
                    sideBar.animate({width: w}, 500);
                    sideMain.animate({paddingLeft: w}, 500);
                    setTimeout(() => {
                        sideBar.removeClass('side-switch');
                        if (w === 0) {
                            sideBar.hide();
                        }
                        this.filter(sideBar, 0);
                    }, 500);
                } else {
                    sideBar.addClass('side-switch');
                    sideBar.addClass('activate');
                    sideBar.animate({width: 70}, 500);
                    sideMain.animate({paddingLeft: 70}, 500);
                    sideBar.show();
                    $('[data-group="collapse"]').collapse('hide');
                    setTimeout(() => {
                        this.filter(sideBar, 0);
                    }, 500);
                }
            },
            oldWidth () {
                if ($(window).width() < 993) {
                    return 0;
                }
                return 250;
            },
            filter (el, number) {
                el.css({filter: `blur(${number}px)`});
            }
        },
        components: {
            Breadcrumb,
            FooterInfo
        }
    };
</script>
